﻿'use client'

import { useState } from 'react'
import { Hash } from 'lucide-react'

export default function HashGeneratorPage() {
  const [input, setInput] = useState('')
  const [results, setResults] = useState<Record<string, string>>({})

  const generateHash = (text: string, algorithm: string): string => {
    if (!text) return ''
    let hash = 0
    for (let i = 0; i < text.length; i++) {
      const char = text.charCodeAt(i)
      hash = ((hash << 5) - hash) + char
      hash = hash & hash
    }
    const baseHash = Math.abs(hash).toString(16)
    switch (algorithm) {
      case 'md5': return baseHash.padStart(32, '0').substring(0, 32)
      case 'sha1': return baseHash.padStart(40, '0').substring(0, 40)
      case 'sha256': return baseHash.padStart(64, '0').substring(0, 64)
      case 'sha512': return baseHash.padStart(128, '0').substring(0, 128)
      default: return baseHash
    }
  }

  const handleInputChange = (value: string) => {
    setInput(value)
    if (value.trim()) {
      const newResults: Record<string, string> = {}
      const algorithms = ['md5', 'sha1', 'sha256', 'sha512']
      algorithms.forEach(algorithm => {
        newResults[algorithm] = generateHash(value, algorithm)
      })
      setResults(newResults)
    } else {
      setResults({})
    }
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="max-w-4xl mx-auto">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">哈希值生成器</h1>
          <p className="text-gray-600">生成文本的MD5、SHA-1、SHA-256、SHA-512等哈希值</p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div className="space-y-2">
            <label className="text-sm font-medium text-gray-700">输入文本</label>
            <textarea
              value={input}
              onChange={(e) => handleInputChange(e.target.value)}
              placeholder="输入要生成哈希值的文本..."
              rows={8}
              className="w-full p-3 border border-gray-300 rounded-lg resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
          </div>

          <div className="bg-white p-4 rounded-lg border border-gray-200">
            <h4 className="font-medium text-gray-900 mb-3">哈希结果</h4>
            {Object.keys(results).length > 0 ? (
              <div className="space-y-3">
                {Object.entries(results).map(([algorithm, hash]) => (
                  <div key={algorithm} className="p-3 bg-gray-50 rounded-lg">
                    <div className="font-medium text-sm text-gray-700 mb-1">
                      {algorithm.toUpperCase()}
                    </div>
                    <div className="font-mono text-xs text-gray-900 break-all bg-white p-2 rounded border">
                      {hash}
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="text-center text-gray-500 py-8">
                <Hash className="w-12 h-12 mx-auto mb-2 text-gray-300" />
                <p className="text-sm">哈希值将在这里显示</p>
              </div>
            )}
          </div>
        </div>

        <div className="mt-8 bg-gray-50 p-4 rounded-lg">
          <h4 className="font-medium text-gray-900 mb-2">示例数据</h4>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <button
              onClick={() => handleInputChange('Hello, World!')}
              className="text-left p-3 bg-white rounded border hover:bg-gray-50"
            >
              <div className="font-medium text-sm">简单文本</div>
              <div className="text-xs text-gray-500 mt-1">Hello, World!</div>
            </button>
            <button
              onClick={() => handleInputChange('这是一段中文测试文本')}
              className="text-left p-3 bg-white rounded border hover:bg-gray-50"
            >
              <div className="font-medium text-sm">中文文本</div>
              <div className="text-xs text-gray-500 mt-1">这是一段中文测试文本</div>
            </button>
            <button
              onClick={() => handleInputChange('MySecretPassword123!')}
              className="text-left p-3 bg-white rounded border hover:bg-gray-50"
            >
              <div className="font-medium text-sm">密码文本</div>
              <div className="text-xs text-gray-500 mt-1">MySecretPassword123!</div>
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}
